<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户端</title>
  <link rel="stylesheet" href="./style2.css">
  <link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.css" rel="stylesheet">
</head>

<body>
  <div class="top">行政审批系统</div>
  <div class="container">
    <div class="lefttable">
      <div class="profilePhoto"></div>
      <div><button type="submit" class="login-button">退出登录</button></div>
      <div class="pg active">个人主页</div>
      <div class="task">任务列表</div>
    </div>
    <div class="righttable">
      <div class="topbar">个人信息</div>
      <div class="content1">
        <div class="left">
          <div class="leftTop">个人档案</div>
          <div class="Userinformation">
            <ul>
              <li>
                <h3>用户名:</h3><span>张三</span>
              </li>
              <li>
                <h3>真实姓名:</h3><span>张三</span>
              </li>
              <li>
                <h3>联系方式:</h3><span>123456789</span>
              </li>
            </ul>
            <div class="profilePhoto2"></div>
          </div>
        </div>
        <div class="right">
          <div class="Progress">进度条</div>
          <div class="progress-circle">
            <span>75%</span>
          </div>
        </div>
      </div>
      <div class="content2">
        <div class="top2">任务列表</div>
        <div class="tasklist">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>类型</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div class="tableindex">
          <span></span>
          <button class="prev">
            < </button>
              <button class="btn">1</button>
              <button class="next">></button>
              <select name="" id=""></select>
        </div>
      </div>
    </div>
    <!-- 投诉遮罩层 -->
    <div class="overlay" id="overlay">
      <!-- 投诉弹窗 -->
      <div class="popup">
        <div class="top3">监察投诉</div>
        <div class="input">
          <label for="">联系方式</label>
          <input type="text">
        </div>
        <div class="input">
          <label for="">事项类型</label>
          <input type="text">
        </div>
        <div class="input">
          <label for="">投诉对象</label>
          <input type="text">
        </div>
        <div class="input">
          <label for="">详细情况</label>
          <div id="editor"></div>
        </div>
        <div class="button">
          <button>取消</button>
          <button>确定</button>
        </div>
      </div>
    </div>
    <!-- 详情遮罩层 -->
    <div class="overlay" id="detailOverlay">
      <!-- 详情弹窗 -->
      <div class="popup">
        <div class="top3">详情信息</div>
        <div class="input">
          <ul>
            <li>
              <h3>申请主体：</h3><span id="applicant"></span>
            </li>
            <li>
              <h3>受理编号:</h3><span id="acceptance-number"></span>
            </li>
            <li>
              <h3>受理时间：</h3><span id="acceptance-time"></span>
            </li>
            <li>
              <h3>承诺时限：</h3><span id="commitment-period"></span>
            </li>
            <li>
              <h3>是否超期：</h3><span id="is-overdue"></span>
            </li>
          </ul>
        </div>
        <div class="button">
          <button id="closeDetail">关闭</button>
        </div>
      </div>
    </div>
    <!-- 提交遮罩层 -->
    <div class="overlay" id="submitOverlay">
      <!-- 提交弹窗 -->
      <div class="popup">
        <div class="top3">提交信息</div>
        <div class="input">
          <div class="input">
            <label for="">业务类型</label>
            <input type="text">
          </div>
          <div class="input">
            <label for="">业务简介</label>
            <input type="text">
          </div>
          <div class="input">
            <label for="">人数</label>
            <input type="text">
          </div>
          <div class="input">
            <label for="">费用</label>
            <input type="text">
          </div>
          <div class="input">
            <label for="">发布日期</label>
            <input type="text">
          </div>
          <div class="input">
            <label for="">工号</label>
            <input type="text">
          </div>
        </div>
        <div class="button">
          <button id='closeSubmit'>提交</button>
        </div>
      </div>
    </div>
    <script src="https://cdn.staticfile.org/quill/1.3.6/quill.js"></script>
    <script>
      var quill = new Quill('#editor', {
        theme: 'snow'
      });
      const data = [
        { id: 1, type: '时限监察', status: '已完成' },
        { id: 2, type: '证照信息监察', status: '已完成' },
        { id: 3, type: '时限监察', status: '被驳回' },
        { id: 4, type: '证照信息监察', status: '已完成' },
        { id: 5, type: '行政审批监察', status: '进行中' },
        { id: 6, type: '审批', status: '进行中' },
        { id: 7, type: '审批', status: '进行中' },
        { id: 8, type: '审批', status: '进行中' },
        { id: 9, type: '审批', status: '进行中' },
        { id: 10, type: '审批', status: '进行中' },
        { id: 11, type: '审批', status: '进行中' },
        { id: 12, type: '审批', status: '进行中' },
        { id: 13, type: '审批', status: '进行中' },
        { id: 14, type: '审批', status: '进行中' }
      ];

      const pg = document.querySelector('.pg')
      const task = document.querySelector('.task')
      const topbar = document.querySelector('.topbar')
      const content1 = document.querySelector('.content1')
      const content2 = document.querySelector('.content2')
      const tbody = document.querySelector('tbody')
      const num = document.querySelector('.tableindex span')
      const btn = document.querySelector(".btn")
      const select = document.querySelector('select')
      const overlay = document.getElementById('overlay');
      const detailOverlay = document.getElementById('detailOverlay');
      const submitOverlay = document.getElementById('submitOverlay');
      const submitbutton = document.querySelector('.button button:nth-child(2)')
      const closebutton = document.querySelector('.button button:nth-child(1)');
      const closeDetail = document.getElementById('closeDetail');
      const closeSubmit = document.getElementById('closeSubmit');

      // 切换页面
      pg.addEventListener('click', function () {
        pg.classList.add('active')
        task.classList.remove('active')
        topbar.innerHTML = '个人信息'
        content1.style.display = 'flex'
        content2.style.display = 'none'
      })
      task.addEventListener('click', function () {
        task.classList.add('active')
        pg.classList.remove('active')
        topbar.innerHTML = '任务列表'
        content2.style.display = 'flex'
        content1.style.display = 'none'
      })
      num.innerHTML = `共${data.length}条`

      // 分页显示
      const itemsPerPage = 5;
      let currentPage = 1;
      const totalPages = Math.ceil(data.length / itemsPerPage);

      function renderTable() {
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const currentPageData = data.slice(startIndex, endIndex);

        tbody.innerHTML = '';

        for (let i = 0; i < currentPageData.length; i++) {
          tbody.innerHTML += `
            <tr>
              <td>${currentPageData[i].id}</td>
              <td>${currentPageData[i].type}</td>
              <td class = 'status'>${currentPageData[i].status}</td>
              <td>
                <button class = '${currentPageData[i].status === '已完成' ? 'detail' : 'submit'}'>${currentPageData[i].status === '已完成' ? '详情' : '提交'}</button>
                <button class="complaints">投诉</button>
              </td>
            </tr>
          `;
          // 修改状态样式
          const status = document.querySelectorAll('.status')
          if (status[i].innerHTML === '已完成') {
            status[i].style.color = 'green'
          } else if (status[i].innerHTML === '进行中') {
            status[i].style.color = 'rgb(85, 141, 240)'
          } else {
            status[i].style.color = 'red'
          }
        }

        // 重新获取所有的事件按钮并绑定事件
        //提交事件
        const submit = document.querySelectorAll('.submit');
        for (let i = 0; i < submit.length; i++) {
          submit[i].addEventListener('click', function () {

            submitOverlay.style.display = 'flex'
          })
        }

        // 详情事件
        const detail = document.querySelectorAll('.detail');
        for (let i = 0; i < detail.length; i++) {
          detail[i].addEventListener('click', function () {
            const index = data[i].id - 1;
            const item = data[index];

            // 填充详情信息
            document.getElementById('applicant').textContent = '张三';
            document.getElementById('acceptance-number').textContent = `#${item.id}`;
            document.getElementById('acceptance-time').textContent = '2023-10-01';
            document.getElementById('commitment-period').textContent = '5 个工作日';
            document.getElementById('is-overdue').textContent = '否';

            detailOverlay.style.display = 'flex';
          });
        }

        //投诉事件
        const complaints = document.querySelectorAll('.complaints');
        for (let i = 0; i < complaints.length; i++) {
          complaints[i].addEventListener('click', function () {
            overlay.style.display = 'flex'
          })
        }
      }
      renderTable();
      // 下一页功能
      const nextButton = document.querySelector('.next');
      nextButton.addEventListener('click', function () {
        if (currentPage < totalPages) {
          prevButton.disabled = false;
          currentPage++;
          tbody.innerHTML = '';
          renderTable();
          btn.innerHTML = currentPage;
          select.value = currentPage;
          //   if (currentPage === totalPages) {
          //     nextButton.disabled = true;
          //   }

        }
      });
      // 上一页功能
      const prevButton = document.querySelector('.prev');
      prevButton.addEventListener('click', function () {
        if (currentPage > 1) {
          currentPage--;
          nextButton.disabled = false;
          tbody.innerHTML = '';
          renderTable();
          btn.innerHTML = currentPage;
          select.value = currentPage;
        }
        // if (currentPage === 1) {
        //   prevButton.disabled = true;
        // }
      });
      // 下拉菜单
      for (let i = 1; i <= totalPages; i++) {
        select.innerHTML += `<option value="${i}">${i}</option>`
      }
      select.addEventListener('change', function () {
        currentPage = parseInt(select.value);
        tbody.innerHTML = '';
        renderTable();
        btn.innerHTML = currentPage;
      })

      //关闭投诉弹窗
      submitbutton.addEventListener('click', function () {
        overlay.style.display = 'none'
        alert('提交成功')
      })

      closebutton.addEventListener('click', function () {
        overlay.style.display = 'none'
      })

      //关闭详情弹窗
      closeDetail.addEventListener('click', function () {
        detailOverlay.style.display = 'none'
      })

      //关闭提交弹窗
      closeSubmit.addEventListener('click', function () {
        submitOverlay.style.display = 'none'
        alert('提交成功')
      })

      //退出登录
      const logout = document.querySelector('.login-button')
      logout.addEventListener('click', function () {
        window.location.href = './登录注册.html'
      })
    </script>
</body>

</html>